<template>
    <van-search
        :class="{'z-search':true,'all':!isShowBtn}"
        v-model="searchVal"
        show-action
        placeholder="请输入搜索关键词"
        :left-icon="v_search_white"
        :clear-icon="v_input_close"
        autocomplete="off"
        @click-right-icon="onClear"
        @update:model-value="onUpdateVal"
    >
        <template #action>
            <div @click="onClick" v-if="isShowBtn">{{btnText}}</div>
        </template>
    </van-search>
</template>
<script setup>
    // @focus="isShowBtn = true"
    //     @blur="isShowBtn = false"
import v_search_white from '@/assets/svg/common/v_search_white.svg'
import v_input_close from '@/assets/svg/common/v_input_close.svg'

const props = defineProps({
    btnText: {
        type: String,
        default: '搜索',
    },
});

const emits = defineEmits(['query', 'update:model-value']);

const searchVal = ref('');
const isShowBtn = ref(false);

const onUpdateVal = (val)=>{
    isShowBtn.value = val==''?false:true
    emits('update:model-value', val);
}

const onClear = ()=>{
    searchVal.value = ''
}

const onClick = ()=>{
    emits('query', searchVal.value);
}

</script>
<style scoped lang="scss">
.z-search {
    padding: 10px 0 10px 12px;
    background-color: transparent;

    :deep(.van-search__field) {
        height: 40px;
    }

    :deep(.van-search__content) {
        background: #2B2B33;
        border-radius: 20px;
        padding-left: 20px;
    }
    :deep(.van-field__left-icon) {
        margin-right: 8px;
    }
    :deep(.van-field__control) {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 16px;
    }
    :deep(.van-search__action) {
        color: #FFAA00;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFAA00;
        line-height: 16px;
        padding: 0 16px;

        &:active {
            background-color: transparent;
        }
    }
    &.all {
        padding-right: 12px;
        :deep(.van-search__action) {
            padding: 0;
        }
    }
}

</style>